<template>
	<view class="container">
		<view class="goods-section">
			<!-- 商品列表 -->
			<view class="g-item"  v-for="(item, index) in goodsList" :key="item.goods_id">
				<image :src="item.image" ></image>
				<view class="right" style="margin-top: 30upx;">
					<text class="title clamp" >{{item.title}}</text>
					<text class="title">规格:{{item.spec}}</text>
					<view class="price-box">
						<text class="price">￥{{item.price}}</text>
						<text class="number">x{{item.number}}</text>
						<text class="price">;总计:{{item.total_price }}</text>
					</view>
				</view>
				<label style="margin-top: 10upx;">
					<checkbox value='item.goods_id' :checked="item.checked" @click="check(index)"></checkbox>
				</label>
			</view>
			
		</view>
		<!-- 金额明细 -->
		<view class="yt-list" v-if="logs.length==0">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{order.total}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">{{order.yun_fee}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">支付金额</text>
				<text class="cell-tip">{{order.pay_total}}</text>
			</view>
			<view class="yt-list-cell"  >
				<text class="cell-tit clamp">提货方式</text>
				<view class="cell-tip" v-if="order.pickup_method==1">
					自提
				</view>
				<view class="cell-tip" v-else-if="order.pickup_method==2">
					快递
				</view>
				<view class="cell-tip" v-else-if="order.pickup_method==3">
					1小时送达
				</view>
			</view>
			<view class="yt-list-cell"  >
				<text class="cell-tit clamp">原因</text>
				<view class="cell-tip" >
					<picker @change="pickerChange" :value="index" :range="reasons" range-key="title" >
						<view class="uni-input">{{reasons[index].title}}</view>
					</picker>
				</view>
				
			</view>
			<view class="yt-list-cell" >
				<text class="cell-tit clamp">商品状态</text>
				<view class="cell-tip">
					{{ship_type}}
				<!-- <picker @change="pickerChange1" :value="index1" :range="types" range-key="name" >
					<view class="uni-input">{{types[index1].name}}</view>
				</picker> -->
				</view>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">退款金额</text>
				<input type="text" style='text-align: right;' placeholder="退款金额"  v-model="refund_money" />
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">备注</text>
				<textarea  v-model="remark" style='height: 50upx;'/>
			</view>
			<button class="confirm-btn" @click="refund" >确定</button>
		</view>
		
		
		<view class="yt-list" v-if="need_ship==1">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">快递单号</text>
				<input type="text" style='text-align: left;'   v-model="shipping_no" />
			</view>
			<button class="confirm-btn" @click="post_no" >提交</button>
		</view>
		
		
	
		<view class="yt-list">
			<view class="yt-list-cell b-b" v-for="(item,index) in logs" :key="index" >
				<text class="cell-tit">
					{{item.create_at}}
				</text>
				<text class="cell-tip"  >
					{{item.remark}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import { isEmptyObj,isEmpty,getOneByItem} from '../../utils';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			need_ship:0,
			refund_id:0,
			shipping_no:'',
			order:{
				
			},
			reasons:[{'id':1,title:'测试'}],
			reason:'',
			index:0,
			refund_money:0,
			goodsList:[],
			remark:'',
			types:[
				{
					value: 1,
					name: '未收到',
				},
				{
					value: 2,
					name: '已收货'
				}
			],
			type_name : '未收货',
			index1: 0,
			logs:[],
			ship_type:'未发货',
		};
	},
	computed: {
		...mapState('user',['token']),
		// ...mapState('shop',['shop']),
	},
	onLoad(options) {
		this.order = JSON.parse(options.data).order;
		if(isEmptyObj(this.order) || this.order.id<=0){
			return;
		}
		this.goodsList=this.order.goodsList.map(item => {
			item.checked = true;
			return item;
		});
		this.ship_type= options.f==1? '已收到':'未发货';
		this.refund_money = this.order.pay_total-this.order.yun_fee;
		this.loadReason();
		this.loadRefundLogs();
	},
	onPullDownRefresh() {
		this.loadRefundLogs();
	},
	methods: {
		loadRefundLogs(){
			let param={
				token:this.token,
				order_id: this.order.id
			}
			this.$ajax.get('refund/logs',param).then(data=>{
				if(0==data.error){
					console.log(data);
					this.logs =data.data;
					this.need_ship = data.need_ship;
					this.refund_id = this.logs[0].refund_id;
				}
				uni.stopPullDownRefresh();
			});
			
		},
		check(index) {
			this.goodsList[index].checked = !this.goodsList[index].checked;
			if(this.goodsList[index].checked){
				this.refund_money =parseFloat(this.refund_money + this.goodsList[index].total_price);
			}else{
				this.refund_money =parseFloat(this.refund_money- this.goodsList[index].total_price);
			}
		},
		pickerChange(e){
			this.index = e.target.value;
			this.reason = this.reasons[this.index].title;
		},
		pickerChange1(e){
			this.index1 = e.target.value;
			this.type_name = this.types[this.index1].name;
		},
		loadReason(){
			this.$ajax.get('refund/reasons',{}).then(data=>{
				if(0==data.error){
					this.reasons =data.data;
					this.reasons.unshift({'id':0,'title':'-请选择-'});
				}
			});
		},
		refund() {
			if(this.order.status >=2 && this.order.status<=5){
				if(this.index==0){
					return this.$api.msg('请选择原因');
				}
				let refund_order_goods_ids=[];
				this.goodsList.forEach(item=>{
					if(item.checked==true){
						refund_order_goods_ids.push(item.id);
					}
				})
				
				if(refund_order_goods_ids.length==0){
					return this.$api.msg('请选择你需要退款的商品');
				}
				
				let param={
					token : this.token,
					refund_reason:this.reason,
					order_id:this.order.id,
					refund_order_goods_ids: refund_order_goods_ids.join(','),
					refund_money:this.refund_money,
					remark: this.remark,
					refund_type: this.type_name
				}
				this.$ajax.get('refund/apply',param).then(data=>{
					this.$api.msg(data.msg);
					if(0==data.error){
						setTimeout(function(){
							return uni.navigateBack();
						},500)
					}
				});
			}
		},
		post_no(){
			if (this.refund_id==0){
				return;
			}
			if(this.shipping_no==''){
				return this.$api.msg('请输入快递单号');
			}
			let param={
				refund_id:this.refund_id,
				shipping_no:this.shipping_no,
			}
			this.$ajax.get('refund/addlog',param).then(data=>{
				this.$api.msg(data.msg);
				if(0==data.error){
					this.loadRefundLogs();
					this.shipping_no ='';
				}
			});
		},
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-bottom: 100upx;
}

.goods-section {
	margin-top: 1upx;
	background: #fff;
	padding-bottom: 1px;

	.g-header {
		display: flex;
		align-items: center;
		height: 84upx;
		padding: 0 30upx;
		position: relative;
	}

	.logo {
		display: block;
		width: 50upx;
		height: 50upx;
		border-radius: 100px;
	}

	.name {
		font-size: 30upx;
		color: $font-color-base;
		margin-left: 24upx;
	}

	.g-item {
		display: flex;
		margin: 20upx 30upx;

		image {
			flex-shrink: 0;
			display: block;
			width: 140upx;
			height: 140upx;
			border-radius: 4upx;
		}

		.right {
			flex: 1;
			padding-left: 24upx;
			overflow: hidden;
		}

		.title {
			font-size: 30upx;
			color: $font-color-dark;
		}

		.spec {
			font-size: 26upx;
			color: $font-color-light;
		}

		.price-box {
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: $font-color-dark;
			padding-top: 10upx;

			.price {
				margin-bottom: 4upx;
			}
			.number {
				font-size: 26upx;
				color: $font-color-base;
				margin-left: 20upx;
			}
		}

		.step-box {
			position: relative;
		}
	}
}

.yt-list {
	margin-top: 16upx;
	background: #fff;
}

.yt-list-cell {
	display: flex;
	align-items: center;
	padding: 10upx 30upx 10upx 40upx;
	line-height: 70upx;
	position: relative;

	&.cell-hover {
		background: #fafafa;
	}

	&.b-b:after {
		left: 30upx;
	}

	.cell-icon {
		height: 32upx;
		width: 32upx;
		font-size: 22upx;
		color: #fff;
		text-align: center;
		line-height: 32upx;
		background: #f85e52;
		border-radius: 4upx;
		margin-right: 12upx;

		&.hb {
			background: #ffaa0e;
		}

		&.lpk {
			background: #3ab54a;
		}
	}

	.cell-more {
		align-self: center;
		font-size: 24upx;
		color: $font-color-light;
		margin-left: 8upx;
		margin-right: -10upx;
	}

	.cell-tit {
		flex: 1;
		font-size: 26upx;
		color: $font-color-light;
		margin-right: 10upx;
	}

	.cell-tip {
		font-size: 26upx;
		color: $font-color-dark;

		&.disabled {
			color: $font-color-light;
		}

		&.active {
			color: $base-color;
		}
		&.red {
			color: $base-color;
		}
	}

	&.desc-cell {
		.cell-tit {
			max-width: 90upx;
		}
	}

	.desc {
		flex: 1;
		font-size: $font-base;
		color: $font-color-dark;
	}
}
.confirm-btn {
	width: 630upx;
	height: 76upx;
	line-height: 76upx;
	border-radius: 50px;
	margin: 20upx auto 0 auto;
	background: $nav-bg;
	color: #fff;
	font-size: $font-lg;
	&:after {
		border-radius: 100px;
	}
}

</style>
